<script setup>
    import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
    import { useRouter } from 'vue-router'

    const router = useRouter()
    const searchValue = ref('')

    //获取当前vue实例
    const { proxy } = getCurrentInstance()

    //首页数据
    const homeData = reactive({
        hospitals: [],
        nav2s: [],
        navs: [],
        now: '',
        slides: [],
    })

    //快捷入口
    const goOrderTwo = (index) => {
        router.push(`/createOrder?id=${homeData.hospitals[index].id}`)

    }

    //点击医院列表
    const goOrder = (data) => {
        router.push(`/createOrder?id=${data.id}`)
    }

    onMounted(async () => {
        const { data } = await proxy.$api.index()
        Object.assign(homeData, data.data)
        console.log(homeData);

    })
</script>

<template>
    <div class="header">
        <div class="header-left">
            中部地区
            <van-icon name="arrow" />
        </div>
        <van-search v-model="searchValue" shape="round" placeholder="找医院" />
    </div>
    <div class="content">
        <van-swipe class="my-swiper" height="170" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in homeData.slides" :key="item.id">
                <van-image radius="5px" :src="item.pic_image_url" />
            </van-swipe-item>
        </van-swipe>

        <van-row justify="space-around">
            <van-col v-for="(item, index) in homeData.nav2s" :key="item.id" class="center-img" span="11"
                @click="goOrderTwo(index)">
                <van-image radius="5px" :src="item.pic_image_url" />
            </van-col>
        </van-row>

        <van-row @click="goOrder(item)" class="yy-list" v-for="item in homeData.hospitals" :key="item.id" justify="space-around">
            <van-col span="6">
                <van-image width="100" height="90" radius="5px" :src="item.avatar_url" />
            </van-col>
            <van-col class="yy" span="15">
                <div class="yy-name">{{ item.name }}</div>
                <div class="yy-type">
                    <span>{{ item.rank }}</span>
                    &nbsp;
                    <span>{{ item.label }}</span>
                </div>
                <div class="yy-text">{{ item.intro }}</div>
            </van-col>
        </van-row>
    </div>

</template>

<style lang="less" scoped>
    .header {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 60px;
        background-color: #fff;
        font-size: 22px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;

        .header-left {
            margin-left: 20px;
        }
    }

    .content {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    .my-swiper {
        margin: 5px;
    }

    .yy-list {
        padding-bottom: 10px;
        margin: 20px 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);

        .yy {
            .yy-name {
                font-size: 20px;
                line-height: 30px;
                font-weight: bold;
            }

            .yy-type {
                font-weight: bold;
                line-height: 25px;
                font-size: 15px;
                color: #0ca7ae;
            }

            .yy-text {
                font-size: 14px;
                color: #999;
            }
        }
    }

    .bottom-btn {
        line-height: 50px;
        text-align: center;
        color: #999;
    }
</style>